<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }
    .layui-table-cell{
      height: 60px;
    }
    #updateBox{
      width: 600px;
      height: auto;
      display: none;
    }
  </style>
</head>

<body>
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="">网站管理</a>
        <a><cite>查看合作案例</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-inline">
          <span type="button" onclick="getIds()" class="layui-btn layui-btn-danger" style="margin-right: 20px;"><i
            class="layui-icon layui-icon-delete"></i> 批量删除</span>
          <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="search" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
          </div>
          <button type="button" lay-submit lay-filter="search" class="layui-btn"><i class="layui-icon layui-icon-search" style="margin-right: 5px;"></i>   搜索</button>
        </div>
      </form>
      <table class="layui-table partTable" id="demo" lay-even lay-skin="row " lay-size="	lg ">
        
      </table>
    </div>
  </div>
  <!-- 修改弹出层 -->
  <div id="updateBox">
    <form class="layui-form" action="">
      <input type="hidden" name="pid">
      <div class="layui-form-item">
        <label class="layui-form-label">合作者</label>
        <div class="layui-input-block">
          <input type="text" name="pname" style="width: 60%" required lay-verify="required" placeholder="请输入合作者名字" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">合作内容</label>
        <div class="layui-input-block">
          <input type="text" name="ptxt" style="width: 60%" required lay-verify="required" placeholder="请输入合作事件" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">合作logo</label>
        <div class="layui-input-inline">
          <button type="button" class="layui-btn" id="updateImg">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block" style="width: 54%">
          <blockquote class="layui-elem-quote layui-quote-nm">
            预览图
            <div>
              <img src="" class="thumb" width="290" alt="">
              <!-- 新图地址 -->
              <input type="hidden" name="pimg" class="newthumb">
              <!-- 旧图地址 -->
              <input type="hidden" name="oldpimg" class="oldthumb">
            </div>
          </blockquote>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="updateForm">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>

<script type="text/html" id="titleTpl">
  <div>
    <button type="button" onclick="updatePart('{{d.pid}}')" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>
    <button type="button" onclick="deletePart('{{d.pid}}','{{d.plogo}}')" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
  </div>
</script>
<script type="text/html" id="titleTpl3">
  <div>
    <span onclick="updateShow('{{d.pid}}','{{d.pshow?0:1}}')" class="layui-btn layui-btn-sm {{d.pshow?'':'layui-btn-danger'}}">{{d.pshow?"已启用":"未启用"}}</span>
  </div>
</script>

<script>
  var $, layer, tableIns, form;
  // 删除
  function deletePart(id,img) {
    var index = layer.open({
      title:"删除合作案例信息",
      content: '确认要执行删除操作么',
      btn:['确定','取消'],
      yes: function(index, layero){
        $.ajax({
          type:"GET",
          url:`/admin/web/cooperation_delete?id=${id}&img=${img}`,
          dataType:"json",
          success:(res)=>{
            if (res.code == 1){
              tableIns.reload();
            }
            layer.msg(res.msg);
            layer.close(index);
          }
        })
      },
      btn2: function(index, layero){

      }
    });
  }
  
  // 修改
  function updatePart(id) {
    $.ajax({
      type:"GET",
      url:`/admin/web/cooperation_update?id=${id}`,
      dataType:"json",
      success:(res)=>{
        if (res.code == 1){
          var index = layer.open({
            type:1,
            title:"修改合作案例",
            content:$("#updateBox")
          })
          let data = res.data;
          $("[name=pname]").val(data.pname);
          $("[name=ptxt]").val(data.ptxt);
          $("[name=pid]").val(data.pid);
          $(".thumb").attr("src",data.plogo);
          $(".oldthumb").val(data.plogo);

          // 数据提交
          form.on("submit(updateForm)",(data)=>{
            $.ajax({
              type:"POST",
              url:"/admin/web/cooperation_update",
              data:data.field,
              dataType:"json",
              success:(res)=>{
                if (res.code == 1){
                  tableIns.reload();
                  layer.close(index);
                }
                layer.msg(res.msg);
              }
            })
            return false;
          })
        }
      }
    })
  }

  // 修改已启用与未启用
  function updateShow(id,show) {
    $.ajax({
      type:"GET",
      url:`/admin/web/cooperation_updateShow?id=${id}&show=${show}`,
      success:(res=>{
        let {code, msg} = res;
        if (code == 1){
          tableIns.reload();
        }
        layer.msg(msg);
      })
    })
  }
  
  // 修改排序
  function updataSort(id,obj){
    // 发送请求
    $.get(`/admin/web/updateShow?id=${id}&sort=${obj.value}`,(res)=>{
      let {code,msg} = res;
      if (code==1){
        tableIns.reload();
      }
      layer.msg(msg);
    })
  }
  
  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  //JS

  layui.use(['element','table','jquery','layer','upload'], function () {
    var {element,table,upload} = layui;
    $ = layui.$, layer = layui.layer, form = layui.form;
    // 获取数据
    tableIns = table.render({
      elem:".partTable",
      url:"/admin/web/cooperation_query",
      cols:[[
        {field: 'is_checkout',
          width: '5%',
          type: 'checkbox',
          fixed: 'left'},
        {field:"pid",title:"ID",width:80,sort:true},
        {field:"pname",title:"合作伙伴"},
        {field:"ptxt",title:"合作事件"},
        {field:"plogo",title:"logo",templet:function(d){
            return `
                    <div>
                      <img width = "300" src="${d.plogo}" alt="">
                    </div
                    `
        }},
        {field:"ptime",title:"合作开始时间"},
        {field:"pshow",title:"是否启用",templet:"#titleTpl3"},
        {field:"",title:"操作",fixed:"right",templet:"#titleTpl"}
      ]],
      loading: true,
      toolbar: '#banner_list_top',
      title: '合作案例信息详情表',
      page:true,
      limits: [1, 2, 3, 5, 10, 20, 50, 100, 200, 500, 1000],
      limit: 5
    });

    // 表格的搜索功能
    form.on('submit(search)', function (data) {
      // 使用表格的重载 就不需要
      tableIns.reload({
        where: { //设定异步数据接口的额外参数，任意设
          search: data.field.search,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    })
    
    // 图片上传
    upload.render({
      elem:"#updateImg",
      url:"/admin/web/upload",
      done:(res)=>{
        if (res.code == 1){
          $(".thumb").attr("src",res.url);
          $(".newthumb").val(res.url);
        }else{
          layer.msg("图片上传失败")
        }
      }
    })
  });

  function getIds()
  {
    var checkStatus = layui.table.checkStatus('demo'); //demo 即为基础参数 id 对应的值

    // console.log(checkStatus.data) //获取选中行的数据即 多个行对象
    // console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
    // console.log(checkStatus.isAll ) //表格是否全选
    if (checkStatus.data.length>0) {
      var idsArray = [];
      var content = "确定要对ID为";
      for (var i = 0; i < checkStatus.data.length; i++) {
          idsArray.push(checkStatus.data[i].pid);
          content += checkStatus.data[i].pid + ",";
      }
      content = content.slice(0, -1);
      content += "的";
      content += checkStatus.data.length;
      content += "个合作案例一起删除么";
      var index = layer.open({
        title:"删除合作案例信息",
        content: content,
        btn:['确定','取消'],
        yes: function(index, layero){
          for (var i = 0; i < checkStatus.data.length; i++) {
              idsArray.push(checkStatus.data[i].new_id);
          }
          let j = 0, msg = "";
          for (var i = 0; i < checkStatus.data.length; i++) {
            id = checkStatus.data[i].pid;
            img = checkStatus.data[i].plogo;
            $.ajax({
              type:"GET",
              url:`/admin/web/cooperation_delete?id=${id}&img=${img}`,
              dataType:"json",
              success:(res)=>{
                if (res.code == 1){
                  tableIns.reload();j++;
                }
              }
            })
          }
          if (j == checkStatus.data.length){
            tableIns.reload();
          }
          layer.msg("成功删除");
          layer.close(index);
        }
      });
    }
    else{
      layui.layer.alert("请至少选择一行后执行删除操作");
    }
  }
</script>